<template>
  <div class="request-party-service-manage">
    <div class="app-container">
      <div class="mainbox">
        <Header :header-name="$route.meta.title" />

        <el-row>
          <el-col :span="4">
            <GroupTree
              @changeIndexCode="changeIndexCode"
              @rootNode="rootNodeFun"
              @checkedCha="checkedCha"
            />
          </el-col>
          <el-col :span="20">
            <div class="request-party-service-manage-body">

              <!-- 搜索板块 -->
              <GroupCameraPage
                ref="GetPageFormRef"
                :ids="ids"
                @getTableData="getTableData"
                @resetBtn="resetBtn"
                @addBtn="synchronous"
              />
              <!-- 表格数据视图 -->
              <div>
                <FlexTable
                  v-loading="loading"
                  border
                  :data="tableData"
                  :columns="columnsOptions"
                  @selection-change="handleSelectionChange"
                />
                <el-pagination
                  :page-size="pagination.pageSize"
                  :current-page.sync="pagination.pageNo"
                  layout="prev, pager, next, jumper"
                  :total="pagination.totalPage"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                />
              </div>
            </div>
          </el-col>
        </el-row>

        <!-- 添加或修改服务器监测对话框 -->
        <SynchronousGroupCamera ref="SynchronousGroupCameraRef" :ids="ids" @getList="getTableData" />
      </div>
    </div>
  </div>
</template>

<script>
import { getRegionDevicesList } from '@/api/groupCameraSynchronization'
import SynchronousGroupCamera from '@/views/groupCameraSynchronization/components/synchronousGroupCamera.vue'
import GroupTree from '@/views/groupCameraSynchronization/components/groupTree.vue'
import GroupCameraPage from './components/groupCameraPage.vue'
import { regionIndexCodesCompareRootNode } from '@/views/groupCameraSynchronization/utils'
import dictMixin from '@/utils/mixins/dict'

export default {
  name: 'GroupCameraSynchronization',
  components: {
    GroupCameraPage,
    GroupTree,
    SynchronousGroupCamera
  },
  mixins: [
    dictMixin(['VideoChannel'])
  ],
  data () {
    return {
      ids: [],
      loading: false,
      tableData: [],
      regionIndexCodes: null,
      rootNode: null,
      isSubRegion: true,
      columnsOptions: [
        { type: 'selection' },
        { label: '监控点名称', prop: 'name' },
        { label: '设备ip',
          customRender: scope => {
            return <span> 级联 </span>
          } },
        { label: '所属区域', prop: 'regionName' },
        { label: '通道类型', prop: 'channelType',
          customRender: scope => {
            return this.getDictText('VideoChannel', scope.row.channelType)
          }
        },
        { label: '操作', width: 140,
          customRender: (scope) => {
            return [
              <el-button vPermission={['GROUPCAMERASYNCHRONIZATION_ADD_BUTTON']} type='text' onClick={() => this.synchronousRow(scope.row)}> 新增状态监控 </el-button>
            ]
          }
        }
      ],
      pagination: {
        pageNo: 1,
        pageSize: 10,
        totalPage: null
      }
    }
  },
  watch: {
    regionIndexCodes: {
      handler(a, b) {
        this.$refs.GetPageFormRef.form = {}
        this.getTableData()
      }
    }
  },
  mounted() {
    this.getTableData()
  },
  methods: {
    checkedCha(val) {
      this.isSubRegion = val
    },
    rootNodeFun(indexCode) {
      this.rootNode = indexCode
    },
    changeIndexCode(indexCode) {
      this.regionIndexCodes = [indexCode]
    },
    synchronous() { // 同步按钮
      this.$refs.SynchronousGroupCameraRef.dialogVisible = true
      this.$refs.SynchronousGroupCameraRef.list = this.ids
    },
    synchronousRow(row) {
      this.$refs.SynchronousGroupCameraRef.dialogVisible = true
      this.$refs.SynchronousGroupCameraRef.list = [row]
    },
    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.getTableData()
    },
    handleCurrentChange(val) {
      this.pagination.pageNo = val
      this.getTableData()
    },
    getTableData(val) {
      this.loading = true
      const params = {
        pageNo: this.pagination.pageNo,
        pageSize: this.pagination.pageSize,
        regionIndexCodes: this.regionIndexCodes,
        resourceType: 'camera',
        isRoot: regionIndexCodesCompareRootNode(this.regionIndexCodes, this.rootNode),
        isSubRegion: this.isSubRegion,
        name: val
      }
      getRegionDevicesList(params).then(res => {
        const { code, data } = res
        if (code === '00000') {
          this.tableData = data.list
          this.pagination.totalPage = data.total
        }
      }).finally(() => {
        this.loading = false
      })
    },
    resetBtn() {
      this.form = {}
      Object.assign(this.pagination, {
        pageNo: 1,
        pageSize: 10,
        totalPage: 0
      })
      this.getTableData()
    },
    handleSelectionChange(val) {
      this.ids = []
      this.ids = val.map(item => {
        return item
      })
    }

  }
}
</script>

<style lang="scss" scoped>
.request-party-service-manage {
  background: #F2F2F2;

  &-body {
    background: #fff;
    margin-top: 10px;
    padding: 20px;
    height: calc(100vh - 254px);
    overflow-y: auto;
  }
  .el-pagination {
    text-align: right;
    margin-top: 20px;
  }

  .el-tree {
    ::v-deep .el-tree-node__expand-icon {
      font-size: 18px;
    }
    .custom-tree-node {
      width: calc(100% - 30px);
      display: flex;
      align-items: center;
      padding-right: 20px;

      > span:first-child {
        display: inline-block;
        width: calc(100% - 50px);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        line-height: 40px;
      }

      .tree-btn {
        .el-switch {
          margin-top: -4px;
          margin-left: 10px;
        }
      }
    }
  }
}
</style>

